<template>
    <div>
        <img id="img" :src="imgUrl"/>
        <br>
        <p>{{getDpi}}</p>
    </div>
</template>

<script>

    // 获取图片真实高度
    function getImageWidth(url,callback){
        var img = new Image();
        img.src = url;
        // 如果图片被缓存，则直接返回缓存数据
        if(img.complete){
            callback(img.width, img.height);
        }else{
            img.onload = function(){
                callback(img.width, img.height);
            }
        }
    }


    export default {
        name: "ImageTest",
        data(){
            return{
                imgUrl:'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg',
                dpi:''

            }
        },
        computed:{
                getDpi(){
                    let self = this;
                    getImageWidth(this.imgUrl,function (w,h) {
                        self.dpi =  w+' * '+h;
                    });
                    return self.dpi;
                }

        }
    }
</script>

<style scoped>

</style>